<template>
  <div class="about">
   <!-- 轮播图 -->
    <el-carousel  class="lunbotu" arrow="never">
        <el-carousel-item v-for="(item,index) in forData" :key="index">
            <img :src="item.url" alt="">
        </el-carousel-item>
    </el-carousel>
    <!-- 定位栏 -->
    <div class="contentHeaderCon">
        <h1 class="conHeaderTitle1">{{companyText1}}</h1>
        <h1 class="conHeaderTitle2">{{companyText2}}</h1>
    </div>
    <div class="company">
      <p class="company_title">{{companyTitle }}</p>
      <p class="company_en">{{companyTitleEn }}</p>
      <div class="detail clearFix">
        <div class="detail_img">
          <img :src="companyImg" />
        </div>
        <p class="detail_text" v-html="companyText"></p>
      </div>
    </div>

    <div class="team">
      <p class="team_title text-center">{{teamTitle }}</p>
      <p class="team_en text-center">{{teamTitleEn }}</p>
      <div class="team_container clearFix">
        <div class="team_item"  v-for="(item, index) in teamImgs" :key="index">
          <img :src="item.url"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {AboutUs,CompanyProfile,TeaMmien,getWebsiteOtherTuData} from '@/api/getData'
import Banner from "@/components/Banner";
export default {
  components: {
    Banner,
  },
  data() {
    return{
      companyTitle: "公司简介",
      companyTitleEn: "Company Profile",
      companyImg: require("@/assets/images/company_img.png"),
      companyText:
        "公司核心团队成立于2011年，目前，已在北京、合肥、重庆等地设有分公司及研发中心，并在全国一二线城市设有完备的营销、技术服务网络。截止2018年底，员工规模已逾120+人，其中技术研发人员超过100+人。服务客户近700+，服务知名企业客户近500家。是仁和药业、海尔集团、歌华传媒,小米，浪，乐视等企业的重要合作伙伴。公司核心团队成立于2011年，目前，已在北京、合肥、重庆等地设有分公司及研发中心，并在全国一二线城市设有完备的营销、技术服务网络。截止2018年底，员工规模已逾120+人，其中技术研发人员超过100+人。服务客户近700+，服务知名企业客户近500家。是仁和药业、海尔集团、歌华传媒,小米，新浪，乐视等企业的重要合作伙伴。公司核心团队成立于2011年，目前，已在北京、合肥、重庆等地设有分公司及研发中心，并在全国一二线城市设有完备的营销、技术服务网络。截止2018年底，员工规模已逾120+人，其中技术研发人员超过100+人。服务客户近700+，服务知名企业客户近500家。是仁和药业、海尔集团、歌华传媒,小米，新浪，乐视等企业的重要合作伙伴。",
      teamTitle: "团队风采",
      teamTitleEn: "Team Spirit",
      teamImgs: [
        require("@/assets/images/team1.png"),
        require("@/assets/images/team2.png"),
        require("@/assets/images/team3.png"),
        require("@/assets/images/team4.png"),
        require("@/assets/images/team5.png"),
        require("@/assets/images/team6.png"),
      ],
      companyText1:'',
      companyText2:'',
      forData:[]
    }
  },
  created(){
    this.AboutUsList()
    this.CompanyProfileList()
    this.TeaMmienList()
    this.getWebsiteOtherTuDataList()
  },
  methods:{
    // 获取官网banner图
    async getWebsiteOtherTuDataList(){
      try {
        const res = await getWebsiteOtherTuData({}).then(res=>{
            console.log('官网数据',res);
            this.forData=res.data.bannerUrl
            this.companyText1=res.data.list[0].theme
            this.companyText2=res.data.list[0].subtitle
        })
      } catch (error) {}
    },
    // 关于我们
    async AboutUsList(){
      try {
        const res = await AboutUs({}).then(res=>{
          console.log('关于我们',res);
          this.companyTitle=res.data[0].name
          this.companyTitleEn=res.data[0].english
          this.teamTitle=res.data[1].name
          this.teamTitleEn=res.data[1].english
        })
      } catch (error) {}
    },
    // 关于我们-公司简介
    async CompanyProfileList(){
      try {
        const res = await CompanyProfile({}).then(res=>{
          console.log('关于我们-公司简介',res);
          this.companyImg=res.data.url
          let e=res.data.company_name
          if (e == null) {
            return
          }
          e = e.replace(/&lt;/g, '<');
          e = e.replace(/&gt;/g, '>');
          e = e.replace(/&quot;/g, '"');
          e = e.replace(/&amp;/g, ' ');
          e = e.replace(/&mdash;/g, '—');

          e = e.replace(/lt;/g, '<');
          e = e.replace(/gt;/g, '>');
          e = e.replace(/quot;/g, '"');
          e = e.replace(/amp;/g, ' ');


          e = e.replace(/img/g, "img style='width:100%;height:auto'");
          e = e.replace(/<p>/g, "<p style='width:100%;height:auto'>");
          this.companyText=e
        })
      } catch (error) {}
    },
    // 关于我们-团队风采
    async TeaMmienList(){
      try {
        const res = await TeaMmien({}).then(res=>{
          console.log('关于我们-团队风采',res);
          this.teamImgs=res.data
        })
      } catch (error) {}
    },
  }
    
};
</script>

<style lang="scss" scoped>
/* 定位内容 */
.contentHeaderCon{
  position: absolute;
  top: 15%;
  left: 10%;
  z-index: 100;
}
.conHeaderTitle1{
  font-size: 45px;
  color: #FFFFFF;
}
.conHeaderTitle2{
  font-size: 57px;
  color: #FFFFFF;
}
// 公司简介
.company {
  width: 1450px;
  margin: 0 auto;
  padding-top: 111px;
  margin-bottom: 112px;
  .company_title {
    margin-bottom: 6px;
  }
  .company_en {
    margin-bottom: 66px;
  }
  .company_title,
  .company_en {
    text-align: center;
    font-size: 46px;
    font-weight: bold;
  }
  .detail_img {
    height: 482px;
    width: 482px;
    float: left;
    margin-right: 46px;
  }
  .detail_text {
    font-size: 22px;
    padding-top: 25px;
    width: 922px;
    float: left;
  }
}
// 团队风采
.team_container .team_item:hover img{
  transform: scale(1.2);
}
.team_container .team_item img{
  transition: all 1s;
}
.team {
  width: 1450px;
  font-size: 46px;
  font-weight: bold;
  margin: 0 auto;
  padding-bottom: 70px;
  .team_title {
    margin-bottom: 6px;
  }
  .team_en {
    margin-bottom: 59px;
  }
  .team_item {
    width: 343px;
    height: 343px;
    float: left;
    margin-right: 26px;
    transition: all 1s;
    overflow: hidden;
  }
  .team_item:first-child {
    height: 712px;
  }
  .team_item:last-child {
    width: 712px;
    margin-right: 0;
  }
  .team_item:nth-child(4) {
    margin-right: 0;
  }
  .team_item:nth-child(2),
  .team_item:nth-child(3),
  .team_item:nth-child(4) {
    margin-bottom: 26px;
  }
}
</style>